<template>
<div>
  <div class="flex align-center justify-content-space-between" style="margin-bottom: 20px">
    <div class="title">缴费记录</div>
    <div style="width: 150px">
      <el-select v-model="payRecord.pbFeeStateId" placeholder="请选择缴费状态" @change="getCancerIndicatorList" clearable>
        <el-option v-for="(item,index) in feeStatusList" :key="index" :label="item.pbFeeStateName" :value="item.pbFeeStateId"></el-option>
      </el-select>
    </div>
  </div>
  <el-table :data="recordDataList" style="width: 100%" height="200px">

    <el-table-column prop="pbFeeTime" label="缴费月份"  align="center"  >
      <template #default="{ row }">
        <span>{{ formatDate(row.pbFeeTime) }}</span>
      </template>
    </el-table-column>

    <el-table-column prop="pbfFeeLimit" label="缴费金额"  align="center"  >
      <template #default="{ row }">
        ￥{{row.pbfFeeLimit}}
      </template>
    </el-table-column>

    <el-table-column prop="pbFeeMethod" label="缴费方式"  align="center"  >
      <template #default="{ row }">

        <div class="flex align-center justify-content-center"  v-if="row.pbFeeMethod == '2'">
          <img src="../../../../assets/smart/微信.png" style="margin-right: 5px;height:20px;display: block">
          <div>微信支付</div>
        </div>

        <div class="flex align-center justify-content-center" v-else-if="row.pbFeeMethod == '3'">
          <img src="../../../../assets/smart/支付宝.png" style="margin-right: 5px;height:20px;display: block">
          <div>支付宝</div>
        </div>

        <div class="flex align-center justify-content-center" v-else-if="row.pbFeeMethod == '1'">
          <img src="../../../../assets/smart/银联.png" style="margin-right: 5px;height:20px;display: block">
          <div>现金支付</div>
        </div>


      </template>
    </el-table-column>
    <el-table-column prop="pbFeeTime" label="缴费时间"  align="center"  />

    <el-table-column prop="pbfFeeState" label="状态"  align="center" >
      <template #default="{ row }">
        <div :class="getStatusClass(row.pbfFeeState)">{{ getStatusText(row.pbfFeeState) }}</div>
      </template>
    </el-table-column>


    <el-table-column label="操作"  align="center" >
      <template #default="{ row }">
        <el-button primary link @click="viewReceipt(row)">查看凭证</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="position:relative;">
    <pagination :total="Number(recordDataList.length)" v-model:page="payRecord.pageNumber" v-model:limit="payRecord.pageSize" @pagination="getCancerIndicatorList" /></div>
</div>
</template>

<script setup>
import 'element-plus/dist/index.css'
import {ref} from "vue";
import {getFeeStatusList, getPBFeeInfo} from "@/api/cost/cost.js";
const payRecord = ref({
  pbFeeStateId: '', // 科室
  pageNumber: 1, // 当前页码
  pageSize: 10, // 一页的数据量
  totalCount: 3,
  userId:"",
  pbCommitteeId:"",
  cpcUserName:""
});
const recordDataList = ref([]);
const feeStatusList = ref([]);

const getStatusText = (statusValue) => {
  switch (statusValue) {
    case 0:
      return '已缴费';
    case 1:
      return '部分缴费';
    case 2:
      return '未缴纳';
    default:
      return '未知';
  }
};

// ... 其他导入

const formatDate = (dateString) => {
  if (!dateString) return ''
  try {
    // 创建Date对象并格式化为YYYY-MM-DD
    const date = new Date(dateString)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
  } catch (error) {
    // 如果日期解析失败，直接返回原始字符串的日期部分
    return dateString.split(' ')[0]
  }
}
const getStatusClass = (statusValue) => {
  switch (statusValue) {
    case 2: // 未缴费
      return 'status-unpaid';
    case 1: // 部分缴费
      return 'status-partial';
    case 0: // 已缴费
      return 'status-paid';
    default:
      return '';
  }
};
const getCancerIndicatorList = ()=>{  // 缴费记录分页
   payRecord.value.pageNumber =1;
   getFeeApplyList(payRecord.value);
}
const viewReceipt = (row) => { // 查看凭证方法
  alert(`查看缴费凭证`);
};

// 获取缴费记录数据
const getFeeApplyList= async (reqData) => {
  try {
    let result = await getPBFeeInfo(reqData);
    if (result.status == 200 && result.data.code == 200){
      let data = result.data.data;
      if (Array.isArray(data.items)) {
        recordDataList.value = data.items;
        payRecord.value.totalCount = data.totalCount;
      } else {
        recordDataList.value = [];
      }
    }
  } catch (error) {
    console.error("获取数据失败", error);
  }
}

// 获取申请党费数据
const getFeeStatus= async () => {
  try {
    let result = await getFeeStatusList();
    if (result.status == 200 && result.data.code == 200){
      let data = result.data.data;
      feeStatusList.value = data;
    }
  } catch (error) {
    console.error("获取数据失败", error);
  }
}




getFeeStatus();
getFeeApplyList(payRecord.value);




</script>

<style scoped lang="scss">
.status-unpaid {
  background-color: #FEE2E2;
  color: #A12C2C;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bolder;
  margin: 0 auto;
}

.status-partial {
  background-color: #FEF9C3;
  color: #A27639;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bolder;
  margin: 0 auto;
}

.status-paid {
  background-color: #DCFCE7;
  color: #2E7749;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bolder;
  margin: 0 auto;
}
.title{
   font-weight: bolder;
   font-size: 18px;
   color: #333333;
}
</style>
